<template>
    <div class="container">
        <div class="data-zone">
            <div>
                数据解析，添加“,”分隔的数据，自动解析成各列的key，不用挨个输入
            </div>
            <div class="top-button">
                <button class="btn1 zone-button" :style="{backgroundColor:btn1color}"
                        @click="handleKeys">{{btn1name}}
                </button>
                <button class="btn2 zone-button" :style="{backgroundColor:btn2color}"
                        @click="handleTypes">{{btn2name}}
                </button>
            </div>
            <div>
                <data-bar v-for="(item,index) of lines" :key="item.id"
                          :id="item.id" :no="index+1" @minus="minus"></data-bar>
            </div>
            <div class="bottom">
                <input class="add_num" v-model="add_num" @keypress="checkAddEnter"/>行
                <button class="add_btn zone-button" type="button" @click="addBar">添加</button>
                最后<input class="del_num" v-model="del_num" @keypress="checkDelEnter"/>行
                <button type="button" class="zone-button" @click="delBar">删除</button>
            </div>
        </div>
        <div class="option-zone">
            <form>
                <div class="symbol">
                    <span>间隔符</span><input v-model="middleS"/>
                    <span>循环前部</span><input v-model="loopFront"/><br>
                    <span>前部</span><input v-model="frontS"/>
                    <span>后部</span><input v-model="backS"/>
                </div>
                <div class="number">
                    <span>生成条数</span><input v-model="sum"/>
                </div>
                <div class="checkboxes">
                    <div class="checkboxes1">
                        <span class="boxes-name">循环</span>
                        <checkboxes :choose="1" :list="this.$store.state.lines"></checkboxes>
                    </div>
                    <div class="checkboxes2">
                        <span class="boxes-name">随机</span>
                        <checkboxes :choose="2" :list="this.$store.state.lines"></checkboxes>
                    </div>
                </div>
                <div class="btns">
                    <button class="options-button" type="submit" @click="toTxt">生成TXT</button>
                    <button class="options-button" type="submit" @click="toExcel">生成EXCEL</button>
                </div>
            </form>
        </div>
    </div>
</template>

<script>
    import DataBar from './components/DataBar.vue'
    import Checkboxes from './components/Checkboxes.vue'

    export default {
        name: 'DataFaker',
        components: {
            DataBar,
            Checkboxes
        },
        data() {
            return {
                add_num: 1,
                del_num: 1,
                lines: this.$store.state.lines,
                btn1color: '#64dd17',
                btn1name: '显示键列',
                btn2color: '#64dd17',
                btn2name: '显示类型列',
                middleS: '',
                loopFront: '',
                frontS: '',
                backS: '',
                sum: 1,
            }
        },
        methods: {
            addBar() {
                /*store单文件形式*/
//				this.$store.dispatch('addBar',this.add_num);
                this.$store.commit('addBar', this.add_num);
                this.add_num = 1;
            },
            delBar() {
                /*store单文件形式*/
//				this.$store.dispatch('delBar',this.del_num);
                this.$store.commit('delBar', this.del_num);
                this.del_num = 1;
            },
            checkAddEnter(event) {
                if (event.keyCode === 13)
                    this.addBar();
            },
            checkDelEnter(event) {
                if (event.keyCode === 13)
                    this.delBar();
            },
            minus(id) {
                /*store单文件形式*/
//				this.$store.dispatch('minus',id);
                this.$store.commit('minus', id);
            },
            handleKeys() {
                /*
                逻辑梳理：
                    show_key为true   键列显示    需要隐藏    按钮为隐藏,红色
                 */
                let bool = this.$store.state.show_key;
                this.btn1color = bool ? '#64dd17' : '#ef5350';
                this.btn1name = bool ? '显示键列' : '隐藏键列';
                this.$store.state.show_key = !bool;
            },
            handleTypes() {
                let bool = this.$store.state.show_type;
                this.btn2color = bool ? '#64dd17' : '#ef5350';
                this.btn2name = bool ? '显示类型列' : '隐藏类型列';
                this.$store.state.show_type = !bool;
            },
            toTxt() {
                alert(`txt`);
            },
            toExcel() {
                alert(`excel`);
            }
        }
    }
</script>

<style scoped>
    .container{
        display: flex;
        flex-direction: row;
    }
    .data-zone {
        display: flex;
        flex-direction: column;
        background-color: #03A9F4;
    }

    .top-button {
        display: flex;
        flex-direction: row;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .zone-button {
        height: 40px;
        background-color: #FFC107;
    }

    .btn1 {
        margin-left: 60px;
    }

    .btn2 {
        margin-left: 20px;
    }

    .bottom {
        display: flex;
        flex-direction: row;
        align-items: center;
        font-size: 30px;
    }

    .add_num {
        height: 30px;
        width: 60px;
        margin-left: 40px;
        font-size: 26px;
    }

    .add_btn {
        margin-right: 50px;
    }

    .del_num {
        height: 30px;
        width: 60px;
        font-size: 26px;
    }

    .option-zone {
        display: flex;
        flex-direction: column;
        margin-left: 30px;
    }

    .symbol {
        background-color: #9C27B0;
    }

    .number, .checkboxes, .btns {
        margin-top: 30px;
    }

    .number {
        background-color: #4CAF50;
    }

    .checkboxes {
        display: flex;
        flex-direction: row;
    }

    .btns {
        background-color: #FF5722;
    }

    .checkboxes1 {
        background-color: chartreuse;
    }

    .checkboxes2 {
        background-color: aquamarine;
    }

    .boxes-name {
        margin-left: 100px;
    }

    span {
        margin-right: 5px;
    }

    input {
        width: 60px;
    }

    .symbol input {
        margin-right: 30px;
    }

    .options-button {
        background-color: #FFC107;
    }
</style>
